<template>
  <view class="" style="overflow: hidden">
    <view style="background-color: #fff; padding: 0 32rpx" :style="{ height: navHeight + 'px' }">
      <view class="header" :style="{ paddingTop: customTop + 'px', paddingRight: customRight + 'px' }">
        <image @click="goPage('/pages/myPage/myFriends')" src="../../static/my/txl.png" mode="scaleToFill" />
        <view class="searchBox" @click="goPage('/pages/home/searchPage')">
          <u-input placeholder="搜索内容" readonly border="none" shape="circle" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #A8A8A8"></u-input>
        </view>
      </view>
    </view>
    <view class="main messageList">
      <view class="item" v-for="(item, index) in msgList" :key="index" @click="goPage(item.url)">
        <image :src="item.avatar" mode="scaleToFill" />
        <view class="right">
          <view class="flexjB">
            <view class="title">{{ item.nickName }}</view>
            <view class="sj">{{ item.createTime }}</view>
          </view>
          <view class="flexjB">
            <view class="info"> {{ item.content }} </view>
            <view class="num" v-if="item.count !== 0">{{ item.count }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { goPage, getTopHeight } from "@/utils/commonFn";
import { getApplyCount } from "@/api/my";

//@ts-ignore
import { onShow } from "@dcloudio/uni-app";
import { getUnReadCount } from "@/api/order";
import { getChatList } from "@/api/home";
const msgList = ref<any>([
  {
    avatar: "../../static/my/xttz.png",
    nickName: "系统通知",
    content: "暂无消息通知",
    count: 0,
    url: "/pages/message/msgList",
  },
  {
    avatar: "../../static/my/hytz.png",
    nickName: "好友通知",
    count: 0,
    content: "暂无消息通知",
    url: "/pages/message/addFriend",
  },
]);
const { navHeight, customTop, customRight } = getTopHeight();

onShow(async () => {
  msgList.value = [
    {
      avatar: "../../static/my/xttz.png",
      nickName: "系统通知",
      content: "暂无消息通知",
      count: 0,
      url: "/pages/message/msgList",
    },
    {
      avatar: "../../static/my/hytz.png",
      nickName: "好友通知",
      count: 0,
      content: "暂无消息通知",
      url: "/pages/message/addFriend",
    },
  ];
  uni.showLoading({
    title: "加载中",
  });
  const res2 = await getChatList();
  res2.data.forEach((item: any) => {
    let userId;
    if (item.firstUserId !== uni.getStorageSync("userInfo").id) {
      userId = item.firstUserId;
    }
    if (item.secondUserId !== uni.getStorageSync("userInfo").id) {
      userId = item.secondUserId;
    }
    item.url = `/pages/message/chatPage?id=${userId}&name=${item.nickName}`;
  });
  if (msgList.value[0].nickName === "系统通知") {
    msgList.value = [...msgList.value, ...res2.data];
  }
  const res = await getApplyCount();
  msgList.value[1].count = res.data;
  msgList.value[1].content = res.data === 0 ? "暂无消息通知" : `您有${res.data}条消息未读`;
  const res1 = await getUnReadCount();
  msgList.value[0].count = res1.data;
  msgList.value[0].content = res1.data === 0 ? "暂无消息通知" : `您有${res1.data}条消息未读`;
  uni.hideLoading();
});
</script>

<style lang="less" scoped>
.header {
  width: 100%;
  display: flex;
  align-items: center;
  image {
    width: 64rpx;
    height: 64rpx;
    background: #f7f8fa;
    border-radius: 32rpx;
    margin-right: 30rpx;
  }
  .searchBox {
    /deep/ .u-input {
      background: #f7f8fa;
      padding: 8rpx 12rpx !important;
      margin-right: 10rpx;
    }
  }
}
.messageList {
  margin-top: 20rpx;
  padding: 32rpx 48rpx;
  background: #fff;
  .item {
    display: flex;
    padding-bottom: 32rpx;
    border-bottom: 1rpx solid #f5f7f9;
    margin-bottom: 32rpx;
    &:last-of-type {
      border: none;
      margin-bottom: 0;
    }
    image {
      width: 88rpx;
      height: 88rpx;
      border-radius: 50%;
      margin-right: 24rpx;
      background: #1676fd;
    }
    .right {
      width: calc(100% - 112rpx);
    }
    .flexjB {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .title {
        font-size: 32rpx;
        font-weight: 500;
        color: #1e1e1e;
        line-height: 44rpx;
      }
      .sj {
        font-size: 22rpx;
        color: #bebebe;
        line-height: 32rpx;
      }
      .info {
        font-size: 28rpx;
        color: #bebebe;
        line-height: 46rpx;
        margin-top: 8rpx;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .num {
        width: 36rpx;
        height: 36rpx;
        background: #1676fd;
        border-radius: 50%;
        text-align: center;
        line-height: 36rpx;
        font-size: 26rpx;
        font-family: DINPro, DINPro;
        font-weight: 500;
        color: #ffffff;
        line-height: 34rpx;
      }
    }
  }
}
</style>
